<template>
	<view class="L-main">
		<view class="myConsult">
			<button @click="toMyPolicyConsult">我的咨询</button>
		</view>
		<view class="form">
			<view class="theme text">
				<text>主题：</text>
				<input placeholder="请输入主题" v-model="theme" />
			</view>
			<view class="content text">
				<text>问题内容：</text>
				<textarea placeholder="请输入问题内容(2000字以内)" maxlength="2000" v-model="content"></textarea>
			</view>
			<view class="photo">
				<view class="tit">
					<text>照片</text>
					<text>最多9张，每张10m以内</text>
				</view>
				<view class="photo_list">
					<u-upload ref="uUpload" index="idCard" :header="header" :action="action" :form-data="formData"
						@on-change="OnChange" :upload-text="'上传图片'" width="160" height="160" :max-count="9"
						@on-remove="onRemove" :max-size="10 * 1024 * 1024">
					</u-upload>
				</view>
			</view>
			<view class="address">
				<text>咨询单位：</text>
				<text>南昌科睿特</text>
			</view>
			<view class="btn">
				<button @click="submit">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: `${this.$basePath}/api/fileUpLoad?dir=image`,
				formData: {},
				header: {
					accessToken: uni.getStorageSync('access_token')
				},
				theme: '',
				content: '',
				imgs: []
			}
		},
		onReady() {

		},
		methods: {
			submit() {
				if (/^\s*$/.test(this.theme)) {
					uni.showToast({
						title: '请输入主题',
						icon: 'none'
					})
					return false
				}
				if (/^\s*$/.test(this.content)) {
					uni.showToast({
						title: '请输入内容',
						icon: 'none'
					})
					return false
				}
				uni.showModal({
					title: '温馨提示',
					content: '是否确认提交',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '提交中...',
								mask: true
							});
							this.policyAskProblem();
						}
					}
				});
			},
			policyAskProblem() {
				let data = {
					"photo": this.imgs.join(','),
					"question": this.content,
					"qyName": '科睿特',
					"qyUuid": "12312321321",
					"title": this.theme
				}
				this.$ajax({
					url: '/api/news/zwPolicyAsk/policyAskProblem',
					needAuth: true,
					contentType: 'application/json;charset=utf-8',
					data: JSON.stringify(data)
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '提交成功',
							icon: 'none'
						})
						this.theme = '';
						this.content = '';
						this.imgs = [];
						this.$refs.uUpload.clear();
					}
				}).finally(() => {
					uni.hideLoading();
				})
			},
			onRemove(index, lists, name) {
				this.imgs.splice(index, 1)
			},
			OnChange(res, index, lists, name) {
				console.log(res, index, lists, name)
				if (lists[index].response.code == 200) {
					this.imgs.push(lists[index].response.data)
				} else {
					uni.showToast({
						title: lists[index].response.msg,
						icon: 'none'
					});
					this.$refs.uUpload.remove(index)
				}

			},
			toMyPolicyConsult() {
				uni.navigateTo({
					url: '/pages/index/myPolicyConsult'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.L-main {
		.myConsult {
			display: flex;
			justify-content: flex-end;
			padding-right: 30rpx;
			height: 100rpx;
			align-items: center;

			button {
				width: 180rpx;
				height: 70rpx;
				background-color: #1781fd;
				border-radius: 8rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				padding: 0;
				line-height: 70rpx;
				margin: 0;
			}
		}

		.form {
			padding: 0 30rpx;

			.text {
				text {
					color: #1a1a1a;
					font-size: 36rpx;
					font-weight: bold;
				}
			}

			.theme {
				input {
					margin-top: 20rpx;
					width: 100%;
					font-size: 26rpx;
					height: 56rpx;
					border-bottom: 1rpx solid #f1f1f1;
				}
			}

			.content {
				margin-top: 40rpx;

				textarea {
					margin-top: 40rpx;
					width: 690rpx;
					height: 245rpx;
					border-radius: 8rpx;
					border: solid 2rpx #1781fd;
					font-size: 26rpx;
					padding: 20rpx 25rpx;
					box-sizing: border-box;
				}
			}

			.photo {
				margin-top: 40rpx;

				.tit {
					text {
						&:nth-child(1) {
							color: #1a1a1a;
							font-size: 36rpx;
							font-weight: bold;
							margin-right: 10rpx;
						}

						&:nth-child(2) {
							font-size: 24rpx;
							color: #999999;
						}
					}
				}

				.photo_list {
					margin-top: 20rpx;
				}
			}

			.address {
				margin-top: 30rpx;
				display: flex;
				align-items: center;

				text {
					&:nth-child(1) {
						font-size: 36rpx;
						color: #1a1a1a;
						font-weight: bold;
					}

					&:nth-child(2) {
						font-size: 32rpx;
						color: #999;
						flex: 1;
						overflow: hidden;
					}
				}
			}

			.btn {
				margin-top: 120rpx;

				button {
					width: 316rpx;
					height: 88rpx;
					background-color: #1781fd;
					border-radius: 12rpx;
					color: #FFFFFF;
					font-size: 34rpx;
				}
			}
		}
	}
</style>
